<template>
    <div class="homeBox">
        <div class="img">
            <img src="http://zhihu.vikingship.xyz/img/callout.10de9efe.svg">
        </div>
        <button class="btn btn-outline" @click="push('/create')">
            发布文章
        </button>
    </div>
    <CatList :list="column" :more="more" :onMore="addMore" />
</template>

<script lang='ts'>
import { defineComponent, onMounted, computed, ref } from 'vue'
import CatList from '../../components/CatList/index.vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { Message } from '../../coustom/Message'
export default defineComponent({
    name: 'Home',
    components: {
        CatList
    },
    setup() {
        const { push } = useRouter()
        const store = useStore()
        const pageInfo = computed(() => store.getters.columnListPage)
        const checkMore = () => {
            if (pageInfo.value) {
                const { count, pageSize, currentPage } = pageInfo.value
                if (Math.floor(count / pageSize) < currentPage) return false
            }
            return true
        }
        onMounted(() => {
            store.dispatch('getColounList', 1)
        })
        const addMore = () => {
            if (more) {
                const { currentPage } = pageInfo.value
                store.dispatch('getColounList', currentPage + 1)
            }
        }
        const more = computed(() => checkMore())

        const column = computed(() => store.getters.columnList || [])

        return { column, Message, push, addMore, more }
    }
})
</script>
<style scoped lang="less">
.homeBox {
    width: 100%;
    height: 500px;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;

    .img {
        width: 100%;
        display: flex;
        justify-content: center;

        img {
            width: 400px;
            height: 400px;
        }
    }

    .btn-outline-light {
        background-color: #0d6efd;
        color: white;
        padding: 0 20px;
        font-size: 20px;
        display: block;
        line-height: 0;
    }

}
</style>